/*
 * @Author: silas 
 * @Date: 2021-06-18 10:29:11 
 * @Last Modified by: silas
 * @Last Modified time: 2021-08-10 10:50:24
 */
<template>
    <div class="tobBtoC">
        <div class="contentTopTitle">
            <div class="title">宽带用户</div>
        </div>
        <div>
            <el-form
                :inline="true"
                :model="form"
                label-width="60px"
                class="formList"
            >
				<el-form-item label="区域" style="width: 20%" > 
                    <dx-cascader size="mini"
                        :area_id.sync="form.areaId"
                        :maxLevel="2"
                    />
                </el-form-item>
                <el-form-item label="账期" style="width: 20%" >
                    <el-date-picker
						size="mini"
                        v-model="form.time"
                        type="year"
                        placeholder="选择账期"
                        value-format="yyyy"
                    ></el-date-picker>
                </el-form-item>
                <el-form-item label="指标">
                    <el-select v-model="form.indexCode">
                        <el-option v-for="(it, i) in indexCodeList" :label="it.label" :value="it.value" :key="i"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item style="width: 30%">
                    <el-button
                        style="margin-left: 20px"
                        size="mini"
                        type="primary"
                        @click="handle_search"
                        >查询</el-button
                    >
					<el-button size="mini" type="orange" @click="handle_export">
						导出
					</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="table-content clearfix">
            <p class="g-unit"></p>
            <div class="content" style="margin-top: 0;">
                <div class="tableBox">
                    <el-table
						id="table"
                        v-loading="tableLoading"
                        :data="tableData"
                        style="width: 100%"
                        class="tableTh28"
                        border
                        stripe
                        ref="table"
                    >
                        <el-table-column min-width="80" label="区域" prop="areaname" />
                        <el-table-column v-if="titles2.length" min-width="80" label="年度目标" prop="yearbudget" />
						<el-table-column v-for="(it, i) in titles1" :key="'key1' + i" :label="it" min-width="110" :prop="'aft_' + it.substr(-2)">
						</el-table-column>
                        <el-table-column v-for="(it, i) in titles2" :key="'key2' + i" :label="(i + 1) + '月'">
                            <el-table-column min-width="90" label="当月净增数" :prop="'aft_' + it.substr(-2)"></el-table-column>
                            <el-table-column min-width="90" label="完成率" :prop="'complete_' + it.substr(-2)"></el-table-column>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import prefixAPI from "@/api/prefixAPI";
import { getCookie } from "@/common/js/cookie";
import { getSessionStorage } from "@/common/js/storage";
import { $budgetAPI } from "@/api";
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
const exportUrl = prefixAPI.pack;
export default {
    name: "broadbandUser",
    data() {
        
            // month = d.getMonth() + 1;

        return {
            form: {
				areaId: '',
                time: this.moment().format('yyyy'),
                indexCode: '',
            },
            tableData: [],
            tableLoading: false,
            indexCodeList: [],
			titles1: [],
            titles2: [],
        };
    },
    mounted() {
		this.init();
	},
    methods: {
        async init() {
            let that = this;

			that.indexCodeList = await that.getIndexCode();
            that.form.indexCode = that.indexCodeList[0].value;
            that.accountInfo = JSON.parse(getSessionStorage("accountInfo"));
            that.form.areaId = that.accountInfo.areaId;

			that.getData();
        },
		getIndexCode() {
            var d = [], data;
			return new Promise((resolve, reject) => {
				$budgetAPI.getBroadbandOption({}, res => {
					if(res && res.code == 0) {
                        data = res.content[0];
                        for (var i in data) {
                            var obj = {
                                label: data[i],
                                value: i
                            }
                            d = [...d, obj];
                        }
						resolve(d)
					} else {
						reject([])
					}
				}, err => {
					reject([])
				})
			})
		},
        getData() {
            var that = this,
                d = new Date(),
                year = d.getFullYear(),
                title = Array.from(new Array(12), (it, i) => it = year + ( (i + 1) < 10 ? '0' + (i + 1) : (i + 1) + ''));
                
            that.tableLoading = true;
            that.tableData = []
            
            if (that.form.indexCode == 'YS21053') {
                that.titles1 = title;
                that.titles2 = []; 
            } else {
                that.titles1 = [];
                that.titles2 = title;  
            }
            $budgetAPI.getBroadbandList(
                {
					areaId: that.form.areaId,
                    indexCode: that.form.indexCode,
                    acctYear: that.form.time,
                },
                (res) => {
					that.tableData = [];
                    if (res && res.code == 0) {
                        that.tableData = res.content;
					    that.$nextTick(() => {
                            that.$refs.table.doLayout();
                        });
                    }
                    that.tableLoading = false;
                }
            );
        },
		mergeTitles(data, type) {
            let tempArr = [];
            let afterData = [];
            for (let i = 0; i < data.length; i++) {
                if (tempArr.indexOf(data[i][type]) === -1) {
                afterData.push({
                    label: data[i][type],
                    horizonIndexId: data[i].horizonIndexId,
                    origin: [data[i]]
                });
                tempArr.push(data[i][type]);
            } else {
                    for (let j = 0; j < afterData.length; j++) {
                        if (afterData[j].label == data[i][type]) {
                            afterData[j].origin.push(data[i]);
                            break;
                        }
                    }
                }    
            }
            return afterData;
        },
        handle_search() {
			// if(!this.form.time || !this.form.areaId) {
			// 	this.$message.error("请选择账期和版本");
			// 	return false
			// }
            this.getData();
        },
		handle_export() {
			 var acctMonth = this.form.time,
                areaId = this.form.areaId,
                indexCode = this.form.indexCode,
                token = getCookie("token");

            window.open(`${exportUrl}/broadbandUser/exportData?acctYear=${acctMonth}&areaId=${areaId}&indexCode=${indexCode}&token=${token}`, "_self");
			
		}
		// hanlde_version(val) {
		// 	this.form.fcDate = val;
		// 	this.getData();
		// }
    },
};
</script>

<style lang="scss" scoped>
.remark {
    padding-top: 5px;
    text-align: left;
    .attention {
        font-weight: bold;
    }
}
.table-content {
    .table-header {
        display: flex;
        justify-content: space-between;
        .table-title {
            font-size: 14px;
            font-weight: bold;
            height: 30px;
            line-height: 30px;
            span {
                display: inline-block;
                width: 5px;
                height: 5px;
                background-color: #418ee9;
                border-radius: 1000%;
                overflow: hidden;
                margin-right: 10px;
                margin-bottom: 3px;
            }
        }
    }
    .content {
        margin-top: 15px;
    }
}
</style>
